<template>
	<scroll-view scroll-y="true" class="main">
		<view class="top">
			<image src="../../static/pages_my/businessbg.png" class="bg" mode=""></image>
			<u-navbar title="业务员中心" :fixed='false' :border='false' bgColor=" " :autoBack="true">
				<view class="" @click="$goTo('/pages_my/earningsdetail/earningsdetail')" slot='right'
					style="color: #51677D;">
					收益明细
				</view>
			</u-navbar>
			<view class="business_top flex">
				<view class="business_top_left">
					<view class="erweima flex-cneter">
						<image v-if="info.share_url" class="code" :src="info.share_url" mode=""></image>
					</view>
					<view class="down flex u-font-24 u-m-tb-20" @click="preview">
						<text>查看二维码</text>
					</view>
					<view class="down flex u-font-24 u-m-tb-20" @click="$goTo('/pages_my/invite/invite')">
						<!-- <image src="../../static/pages_my/down.png" mode=""></image> -->
						<text>查看海报</text>
					</view>
				</view>
				<view class="business_top_right flex">
					<view class="business_top_right_item flex" @click="$goTo('/pages_my/tixian/tixian')">
						<text class="u-font-40 u-font-bold">{{info.money}}</text>
						<view class="flex u-font-26" style="justify-content: space-between;">
							<text style="color: #ADB1BF;">可提现(元)</text>
							<text style="color: #00CE9B;">提现</text>
						</view>
					</view>
					<view class="business_top_right_item flex">
						<text class="u-font-40 u-font-bold">{{info.order_price}}</text>
						<view class="flex u-font-26" style="justify-content: space-between;">
							<text style="color: #ADB1BF;">总金额(元)</text>
						</view>
					</view>
					<view class="business_top_right_item flex">
						<text class="u-font-40 u-font-bold">{{info.rebateprice}}</text>
						<view class="flex u-font-26" style="justify-content: space-between;">
							<text style="color: #ADB1BF;">总佣金(元)</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="titles ">数据统计</view>
		<view class="allnum flex">
			<view class="allnum_item flex">
				<text>总绑定</text>
				<text style="color: #7473FF;" class="u-font-40 u-font-bold">{{info.recCount}}</text>
			</view>
			<view class="allnum_item flex">
				<text>总单量</text>
				<text style="color: #D725FA;" class="u-font-40 u-font-bold">{{info.count}}</text>
			</view>
			<view class="allnum_item flex">
				<text>总金额(元)</text>
				<text style="color: #E91919;" class="u-font-40 u-font-bold">{{info.order_price}}</text>
			</view>
		</view>
		<view class="lastnum">
			<view class="lastnum_top flex">
				<view class="lastnum_top_item flex">
					<text style="color: #ADB1BF;">今日绑定</text>
					<text class="u-font-40 u-font-bold">{{info.day_rec}}</text>
				</view>
				<view class="lastnum_top_item flex">
					<text style="color: #ADB1BF;">今日下单</text>
					<text class="u-font-40 u-font-bold">{{info.day_count}}</text>
				</view>
				<view class="lastnum_top_item flex">
					<text style="color: #ADB1BF;">今日金额(元)</text>
					<text class="u-font-40 u-font-bold">{{info.day_order_price}}</text>
				</view>
			</view>
			<view class="lastnum_top flex" style="background-color: #FBFBFE;">
				<view class="lastnum_top_item flex">
					<text style="color: #ADB1BF;">昨日绑定</text>
					<text class="u-font-40 u-font-bold">{{info.yesterday_rec}}</text>
				</view>
				<view class="lastnum_top_item flex">
					<text style="color: #ADB1BF;">昨日下单</text>
					<text class="u-font-40 u-font-bold">{{info.yesterday_count}}</text>
				</view>
				<view class="lastnum_top_item flex">
					<text style="color: #ADB1BF;">昨日金额(元)</text>
					<text class="u-font-40 u-font-bold">{{info.yesterday_order_price}}</text>
				</view>
			</view>
		</view>
		<view class="titles ">绑定列表</view>
		<!-- <view class="bindlist " v-for="item in info.list" @click="$goTo('pages_my/nextbusiness/nextbusiness?id=' + item.id)"> -->
		<view class="bindlist " v-for="item in info.list" >
			<view class="bindlist_top flex">
				<view class="bindlist_top_left flex">
					<image :src="$oss(item.avatar)" class="avatar" mode=""></image>
					<view class="bindlist_top_left_text flex u-font-26">
						<text>{{item.nickname}}</text>
						<text style="color: #ADB1BF;">id: {{item.id}}</text>
					</view>
				</view>
				<view class="bindlist_top_right flex">
					<text style="color: #E91919;" class="u-font-bold u-font-40">{{item.order_price}}</text>
					<text class="u-font-26" style="color: #ADB1BF;">已消费(元)</text>
				</view>
			</view>
			<view class="bindlist_bottom u-font-26" style="color: #CCCFD8;">
				加入时间 {{item.createtime | date('yyyy-mm-dd')}}
			</view>
		</view>

	</scroll-view>
</template>

<script>
	import configs from '@/common/config.js'
	export default {
		data() {
			return {
				info: '',
				baseUrl: configs.baseUrl
			};
		},
		onLoad() {
			console.log(this.baseUrl)
			this.getInfo()
			// this.init()
		},
		methods: {
			preview() {
				uni.previewImage({
					urls: [this.info.share_url],

				});
			},
			
			// init(){
			// 	this.$api.post('/skillconsume',{}).then(res=>{
			// 		console.log(res.data);
			// 	})
			// },
			getInfo() {
				this.$api.post('/salesinfo').then(res => {
					if (res.code == 1) {
						this.info = res.data
					}
				}).catch((res) => {

				})
			},
			save() {
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePaths[0],
					success: function() {},
					fail() {}
				});
			},
		}
	}
</script>

<style lang="scss">
	.main ::v-deep .u-navbar__content {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 44px;
		background-color: rgba(1, 1, 1, 0) !important;
		position: relative;
		justify-content: center;
	}
	.titles{
		width: 90%;
		margin: 25rpx auto;
		font-weight: bold;
	}

	.top {
		// height: 579rpx;
		width: 100vw;
		position: relative;

		.bg {
			height: 579rpx;
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		.business_top {
			position: relative;
			z-index: 10;
			justify-content: space-between;
			width: 90%;
			margin: 20rpx auto 0;
			height: 561rpx;
			background: rgba(255, 255, 255, 0.5);
			border: 1rpx solid #fff;
			border-radius: 30rpx;
			box-sizing: border-box;
			padding: 30rpx;

			.business_top_left {
				width: 50%;
				height: 100%;
				border-radius: 30rpx;
				background-color: #81B0FF;
				box-sizing: border-box;
				padding: 30rpx;

				.erweima {
					width: 100%;
					height: 50%;
					background-color: #fff;
					border-radius: 30rpx;

					.code {
						width: 90%;
						height: 90%;
					}
				}

				.down {
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					width: 100%;
					height: 20%;
					background-color: #fff;
					border-radius: 30rpx;
					color: #81B0FF;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.business_top_right {
				width: 50%;
				height: 100%;
				box-sizing: border-box;
				padding: 0 30rpx;
				flex-direction: column;
				justify-content: space-between;

				.business_top_right_item {
					flex-direction: column;
					justify-content: space-between;
					background-color: #fff;
					padding: 30rpx;
					box-sizing: border-box;
					width: 100%;
					height: 33%;
					border-radius: 30rpx;

					&:nth-child(n+2) {
						margin-top: 20rpx;
					}
				}
			}

		}
	}

	.allnum {
		width: 90%;
		margin: 50rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 30rpx;
		align-items: center;
		justify-content: space-around;

		.allnum_item {
			align-items: center;
			justify-content: space-between;
			flex-direction: column;
			height: 120rpx;
		}
	}

	.lastnum {
		width: 90%;
		padding: 30rpx;
		box-sizing: border-box;
		margin: 50rpx auto;
		// padding: 30rpx;
		background-color: #fff;
		border-radius: 30rpx;

		.lastnum_top {
			align-items: center;
			justify-content: space-around;
			height: 174rpx;
			border-radius: 30rpx;

			.lastnum_top_item {
				align-items: center;
				justify-content: space-between;
				flex-direction: column;
				height: 120rpx;
			}
		}
	}

	.bindlist {
		margin: 0 auto 30rpx;
		width: 90%;
		box-sizing: border-box;
		border-radius: 30rpx;
		background-color: #FBFBFE;

		.bindlist_top {
			padding: 30rpx;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-radius: 30rpx;

			.bindlist_top_left {
				align-items: center;

				.avatar {
					width: 77rpx;
					height: 77rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.bindlist_top_left_text {
					flex-direction: column;
					height: 77rpx;
					justify-content: space-between;
				}
			}

			.bindlist_top_right {
				justify-content: space-between;
				flex-direction: column;
				align-items: center;
				// height: 77rpx;
			}
		}

		.bindlist_bottom {
			// text-align: center;
			padding: 10rpx 30rpx;
		}
	}
</style>